<template>
  <div class="index-container">
    <!-- 顶部固定条 -->
    <van-nav-bar
    class="title-bar toutiao-nav-bar"
    fixed
    >
      <van-button @click="$router.push('/search')" round class="search" slot="title" type="default">
         <span><i class="toutiao toutiao-sousuo"></i>搜索</span>
      </van-button>
    </van-nav-bar>
    <!-- 频道列表 -->
    <!-- 通过v-model 绑定激活项目，默认是第一个 -->
    <!-- 通过animated开启动画 -->
    <van-tabs v-model="active" class="channel-menu" animated border>
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <!-- 文章列表组件 -->
        <article-list :channel="item"></article-list>
      </van-tab>
      <!-- 右侧 -->
      <div slot="nav-right" class="placholder"></div>
      <div slot="nav-right" class="hamburger-btn" @click="isChannelEditShow=true">
        <i class="toutiao toutiao-gengduo"></i>
      </div>
    </van-tabs>

    <!-- 频道编辑弹出层 -->
    <van-popup
      v-model="isChannelEditShow"
      closeable
      close-icon="close"
      position="bottom"
      close-icon-position="top-left"
      :style="{ height: '100%' }"
    >
      <channel-edit :my-channels="channels" :active="active" @update-active="onUpdateActive" />
    </van-popup>
  </div>
</template>
<script>
import { GetChannel } from "@/api/user"
import ArticleList from "./components/article-list"
import ChannelEdit from "./components/channel-edit"
import { mapState } from 'vuex'
import { getItem } from "@/utils/storage"
export default {
  data() {
    return {
      active:0,
      channels:[],  // 频道列表
      isChannelEditShow:false   // 控制编辑频道弹出层的显示状态
    };
  },
  async mounted() {
    try {
     
      let channels = []
      if(this.user){
        // 已登录，请求获取用户频道列表
        const { data } = await GetChannel();
        channels = data.data.channels
      }else{
         // 未登录，判断本地是否本地频道列表数据
        const localChannels = getItem('TOUTIAO_CHANNELS')
        if(localChannels){
          // 有，渲染使用
          channels = localChannels;
        }else{
           // 没有，请求默认频道列表(还是那个接口，如果没有登录就返回默认的频道信息)
          const { data } = await GetChannel();
          channels = data.data.channels
        }
      }
      this.channels = channels;
    } catch (error) {
         this.$toast.fail('拉取频道信息出错');
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    // 子组件通知
    onUpdateActive(index,isshow){
      this.active = index;  // 设置新的激活
      this.isChannelEditShow = isshow; // 是否关闭
    }
  },
  components: {
    ArticleList,ChannelEdit
  },
};
</script>
<style scoped lang="less">
.index-container{
  padding-top: 174px;
  padding-bottom: 100px;
  .title-bar{
    .logo{
      height: 80px;
    }
    .search{
      width: 550px;
      height: 60px;
      background-color: #5babfb;
      border:none;
      span{
        color: #fff;
        line-height: 40px;
      }
    }
    // 使用  /deep/处理组件内样式，>>> 在预处理器中不能兼容
    /deep/ .van-nav-bar__title{
       max-width: 100%;
    }
    
  }
  /deep/ .channel-menu{
    .van-tabs__wrap{
      height: 82px;
      position: fixed;
      z-index: 1;
      left: 0;
      right: 0;
      top:92px;
    }
    .van-tab{
      border-right: 1px solid #edeff3;
      min-width: 200px;
      font-size: 30px;
      color: #777;
    }
    .van-tabs__nav{
      padding-bottom: 0;
    }
    .van-tab--active{
      color:#333;
    }
    .van-tabs__line{
       width: 32px!important;
       height: 6px;
       bottom: 8px;
       background-color: #3296fa;
    }
    .placholder{
      width: 66px;
      height: 82px;
      flex-shrink: 0;
    }
    .hamburger-btn{
      position: fixed;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 66px;
      height: 82px;
      background-color: #fff;
      opacity: .902;
      i.tou-tiao{
        font-size: 33px;
      }
      &:before{
        content: "";
        width: 1px;
        height: 100%;
        background-image: url("~@/assets/gradient-gray-line.png");
        background-size: contain;
        position: absolute;
        left: 0;
      }
    }
  }
}
</style>